<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>情绪清单</title>
		<!-- 引用 -->
		<link rel="stylesheet" href="../bootstrap5/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../fontawesome-free-6.1.1-web/css/all.min.css" />
		<script src="../bootstrap5/js/popper.min.js" type="text/javascript"></script>
		<script src="../bootstrap5/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
		<script src="../bootstrap-4.4/js/jquery-3.4.1.min.js"></script>
		<style>
			body {
				background-color: rgba(152, 170, 139, 0.2);
				padding-bottom: 100px;
			}

			ul li {
				margin-bottom: 20px;
			}

			textarea {
				height: 100px;
			}

		</style>
	</head>
	<body>
		<div class="container pt-5">
			<div class="float-end">
				<a href="result.html">
					<button class="btn btn-outline-success" type="button"> 查看已有记录 </button>
				</a>				
			</div>
			<h1>情绪清单</h1>
			<figure class="text-sm-start pb-3">
				<blockquote class="blockquote">
					<p>通过对下列问题的回答，完成对情绪的整理或宣泄~</p>
				</blockquote>
			</figure>

			<form>
				<ul>
					<li>
						<div>
							<h3>情绪描述</h3>
							<h5 class="pt-2 pb-2">我刚才经历了一种什么样的情绪？如何描述它？</h5>
							<div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" id="inlineCheckbox1" value="愤怒"
										name="emotion" checked>
									<label class="form-check-label" for="inlineCheckbox1">愤怒</label>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" id="inlineCheckbox2" value="厌恶"
										name="emotion">
									<label class="form-check-label" for="inlineCheckbox2">厌恶</label>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" id="inlineCheckbox3" value="恐惧"
										name="emotion">
									<label class="form-check-label" for="inlineCheckbox3">恐惧 </label>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" id="inlineCheckbox4" value="羞耻"
										name="emotion">
									<label class="form-check-label" for="inlineCheckbox4">羞耻 </label>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" id="inlineCheckbox5" value="焦虑"
										name="emotion">
									<label class="form-check-label" for="inlineCheckbox5">焦虑 </label>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" id="inlineCheckbox7" value="悲伤"
										name="emotion">
									<label class="form-check-label" for="inlineCheckbox7">悲伤 </label>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" id="inlineCheckbox8" value="痛苦"
										name="emotion">
									<label class="form-check-label" for="inlineCheckbox8">痛苦 </label>
								</div>
							</div>
							<div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" id="inlineCheckbox9" value="喜悦"
										name="emotion">
									<label class="form-check-label" for="inlineCheckbox9">喜悦 </label>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" id="inlineCheckbox10" value="幸福"
										name="emotion">
									<label class="form-check-label" for="inlineCheckbox10">幸福 </label>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" id="inlineCheckbox11" value="欢乐"
										name="emotion">
									<label class="form-check-label" for="inlineCheckbox11">欢乐</label>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" id="inlineCheckbox13" value="希望"
										name="emotion">
									<label class="form-check-label" for="inlineCheckbox13">希望 </label>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" id="inlineCheckbox12" value="惊讶"
										name="emotion">
									<label class="form-check-label" for="inlineCheckbox12">惊讶 </label>
								</div>
							</div>
							<div class="input-group pt-3 pb-2 w-50">
								<span class="input-group-text">为这种情绪选择一种颜色吧！</span>
								<input type="color" class="form-control form-control-color input " name="emotion_color" value="#085524" required>
							</div>
							<div class="input-group pt-3 pb-2 w-75">
								<span class="input-group-text">描述</span>
								<textarea class="form-control input" aria-label="mood-description" name="emotion_detail" required></textarea>
							</div>
						</div>
					</li>
					<li>
						<div>
							<h3>程度描述</h3>
							<h5 class="pt-2 pb-2">我给这种情绪的强度打几分？(1-10)</h5>
							<div class="w-100" style="display: inline-flex; ">
								<input type="range" class="form-range input" min="1" max="10" style="width: 50%;" value="1" name='mark1'
									id="moodRange1" oninput="changeRangeValue(this)" onchange="changeRangeValue(this)" required>
								<span id="moodRange1Value"></span>
							</div>
						</div>
					</li>
					<li>
						<div>
							<h3>情景描述</h3>
							<h5 class="pt-2 pb-2">我是在什么情景下经历到这种情绪的？</h5>
							<div class="">
								<div class="input-group mb-3 d-inline-flex w-auto ">
									<span class="input-group-text" id="inputGroup-sizing-default">时间</span>
									<input type="date" class="form-control"  name="event_date" id='date'
										aria-describedby="inputGroup-sizing-default" required>
								</div>
								<div class="input-group mb-3 d-inline-flex w-auto">
									<span class="input-group-text" id="inputGroup-sizing-default">地点</span>
									<input type="text" class="form-control input"  name="event_place"
										aria-describedby="inputGroup-sizing-default" required>
								</div>

							</div>
							<div class="input-group pt-3 pb-2 w-75">
								<span class="input-group-text">情景描述</span>
								<textarea class="form-control input" aria-label="mood-description"  name="event_detail" required></textarea>
							</div>
						</div>
					</li>
					<li>
						<div>
							<h3>想法回忆</h3>
							<h5 class="pt-2 pb-2">这个情景使我产生了什么样的负面/正面想法？是否还有别的情绪？</h5>
							<div class="input-group pt-3 pb-2 w-75">
								<span class="input-group-text">描述</span>
								<textarea class="form-control input" aria-label="mood-description"  name="thoughts" required></textarea>
							</div>
						</div>
					</li>
					<li>
						<div>
							<h3>生理反应</h3>
							<h5 class="pt-2 pb-2">当我产生这种情绪时，我的身体有什么感觉？</h5>
							<div class="input-group pt-3 pb-2 w-75">
								<span class="input-group-text">描述</span>
								<textarea class="form-control input" aria-label="mood-description"  name="phy_reaction" required></textarea>
							</div>
						</div>
					</li>
					<li>
						<div>
							<h3>反思</h3>
							<h5 class="pt-2 pb-2">如果是我的朋友遭受到这样的情景，我会对他说什么？</h5>
							<div class="input-group pt-3 pb-2 w-75">
								<span class="input-group-text">描述</span>
								<textarea class="form-control input" aria-label="mood-description" name="rethink" required></textarea>
							</div>
						</div>
					</li>

					<li>
						<div>
							<h3>再定义</h3>
							<h5 class="pt-2 pb-2">经过思考后，重新给这种情绪的强度打几分？(1-10)</h5>
							<div class="w-100" style="display: inline-flex; ">
								<input type="range" class="form-range input" min="1" max="10" style="width: 50%;" value="1" name="mark2"
									id="moodRange2" oninput="changeRangeValue(this)" onchange="changeRangeValue(this)" required>
								<span id="moodRange2Value"></span>
							</div>
						</div>
					</li>
					<li>
						<div>
							<h3>行动</h3>
							<h5 class="pt-2 pb-2">下次遇到类似的情况，我应该如何去做？</h5>
							<div class="input-group pt-3 pb-2 w-75">
								<span class="input-group-text">可行做法</span>
								<textarea class="form-control input" aria-label="mood-description" name="action" required></textarea>
							</div>
						</div>
					</li>
				</ul>
				<div class="row g-2 needs-validation mt-4">
					<div class="row">
						<h3>- 请输入您的基本信息</h3>
						<h5>用于生成报告并发送至邮箱</h5>
					</div>
					<div class="col-md-4">
						<div class="input-group has-validation">
							<span class="input-group-text" id="nameArea">姓名</span>
							<input type="text" class="form-control input" id="name" aria-describedby="nameArea" name='name'
								placeholder="请输入姓名或昵称" required>
							<div class="invalid-feedback" style="padding-left: 60px;">
								不能为空
							</div>
						</div>
					</div>

					<div class="col-md-6">
						<div class="input-group has-validation">
							<span class="input-group-text" id="emailArea">Email</span>
							<input type="text" class="form-control input" id="email" aria-describedby="emailArea" name='email'
								placeholder="example@server.com" required>
							<div class="invalid-feedback" style="padding-left: 65px;">
								请检查邮箱格式是否有误
							</div>
						</div>
					</div>
				</div>
				<div class="row justify-content-center mt-5">
					<button type="submit" class="btn btn-success" style="width: 200px; height: 50px;">提交</button>
				</div>
			</form>

		</div>
		<script type="text/javascript">
			function changeRangeValue(com) {
				var rid = com.id;
				var sid = rid + 'Value';
				document.getElementById(sid).innerHTML = com.value;
			}

			// 验证保存数据
			document.querySelector('form').addEventListener("submit", function(event) {
				event.preventDefault();
				// 当用户提交表单时，校验 email 字段
				var emailExp = /^[a-zA-Z0-9_]+@\w+(\.\w+)+$/;
				var email = document.querySelector('#email').value;
				var data={}; // 数据数组
				if (!emailExp.test(email)) {
					$('#email').addClass('is-invalid');
					event.preventDefault();
					return;
				} else {
					$('#email').removeClass('is-invalid');
				}
				// 获取radio数据
				data['emotion'] = document.querySelector("input[name='emotion']:checked").value;           
				// 处理date数据
				data['event_date'] =  document.querySelector("input[name='event_date']").value.split('-');
				// 统一收集input数据
				var inputs = document.querySelectorAll('.input');
				for(var i=0; i<inputs.length;i++)
				{					
					data[inputs[i].getAttribute('name')] = inputs[i].value
				}
				var lists = localStorage.getItem('moodlists');
				if(!lists)
				{
					localStorage.setItem('moodlists', JSON.stringify(data)+';');
				}
				else{
					var item = JSON.stringify(data)
					var arr = lists.split(';');
					if(arr.indexOf(item)>=0)
					{
						alert('您已提交过该表单');
					}
					else
						localStorage.setItem('moodlists', lists+item+';');
				}			
				location.href = 'result.html'
			}, false);

			function verify() {
				var emailExp = /^[a-zA-Z0-9_]+@\w+(\.\w+)+$/;
				var email = document.querySelector('#email').value;
				var inputs = document.querySelectorAll('input');
				for (var i = 0; i < inputs.length; i++) {
					if (!inputs[i].checkValidity()) {
						return false;
					}
				}
				if ($('#name').val() == '') {
					$('#name').addClass('is-invalid');
					return false
				} else {
					$('#name').removeClass('is-invalid');
				}
			}
		</script>
	</body>
</html>
